<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: greenyellow;
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: tomato;
      }
      .wrapper {
        display: none;
      }
      /* > 直接子元素 */
      .wrapper > div {
        flex: 1;
      }

      body {
        width: 90%;
        max-width: 900px;
        margin: 0 auto;
        font: 0.9em/1.2 Arial, Helvetica, sans-serif;
      }

      .box {
        float: left;
        margin-right: 15px;
        width: 150px;
        height: 100px;
        border-radius: 5px;
        background-color: rgb(207, 232, 220);
        padding: 1em; 
      }

      ul { 
        padding: 0;
        list-style: none;
        display: flex;
        background-color: #bfa;
      }

      ul li {
        float: left;
        flex: 1;
        text-align: center;
      }

      li > a {
        text-decoration: none;
        font-size: 18px;
        /* 把a变成块元素后，填充整个li的 */
        display: block;
      }

      li > a:hover {
        color: tomato;
      }

      li:hover {
        /* display: block; */
        background-color: aqua;
      }

      .special {
        background-color: rgb(79, 185, 227);
        padding: 10px;
        color: #fff;
      }

      .cleared {
        /* 清除浮动 */
        clear: left;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Sign In</a></li>
      <li><a href="#">Sign Out</a></li>
    </ul>

    <div class="wrapper">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3">box3</div>
    </div>

    <h1>Simple float example</h1>
    <!-- <a href="#">click</a> -->

    <div class="box">Float</div>

    <p class="special">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus
      aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci,
      pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc,
      at ultricies tellus laoreet sit amet.
    </p>

    <p class="cleared">
      Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet
      orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac
      ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat.
      Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra
      congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus
      varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.
    </p>

    <p>
      Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada
      ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed
      est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus
      tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies
      lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra
      quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis
      natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </p>
  </body>
</html>
